<template>
  <!--  shift+alt+方向-->
  <!--  插值指令:将页面现实的文本内容与响应式变量的值进行绑定
  如果修改响应式变量的值,页面显示文本也会随之改变-->
  <h1>我的第一个页面{{ info }}</h1>
  <span>{{ info }}</span>
  {{ info + ",下午好" }}
  <hr>
  <button @click="f()">点我</button>
  <!-- {{}}是v-text指令的简写形式,将响应式变量的值以文本形式直接数据绑定显示在页面上 -->
  <p v-text="aaa"></p>
  <p>{{aaa}}</p><!--相当于<p v-text="aaa"></p>-->
  <!-- v-html指令也是数据绑定,但若值中有html标签,会渲染出html标签的效果 -->
  <p v-html="aaa"></p>
</template>

<script setup>
import {ref} from 'vue'
//1.定义响应式变量
const info = ref('我是info')
//2.定义箭头函数
const f = ()=>{
  console.log('点击了按钮')
  console.log(info.value)
}
//3.使用响应式变量的值 注意:在JS中使用响应式变量时,必须使用.value
console.log(info.value)
info.value = '我是新值'

const aaa = ref('我是aaa,展示<mark>高亮</mark>效果')

</script>

<style scoped>

</style>